<!DOCTYPE html>
<html>
<head>
    <title> Bootstrap 按钮（Button）插件
    </title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>
<body>
<!--
<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."
        type="button"> 加载状态
</button>
<script>
    $(function () {
        $(".btn").click(function () {
            $(this).button('loading').delay(1000).queue(function () {
                $(this).button('reset');
            });
        });
    });

    $('.btn').button()
</script>


<button type="button" class="btn btn-primary"
        data-toggle="button"> 单个切换
</button>


<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox"> 选项 1 </label>
    <label class="btn btn-primary">
        <input type="checkbox"> 选项 2 </label>
    <label class="btn btn-primary">
        <input type="checkbox"> 选项 3 </label>
</div>

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> 选项 1 </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> 选项 2 </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3"> 选项 3 </label>
</div>-->


<h2>点击每个按钮查看方法效果</h2><h4>演示 .button('toggle') 方法</h4>
<div id="myButtons1" class="bs-example">
    <button type="button" class="btn btn-primary">原始</button>
</div>
<h4>演示 .button('loading') 方法</h4>
<div id="myButtons2" class="bs-example">
    <button type="button" class="btn btn-primary"
            data-loading-text="Loading...">原始
    </button>
</div>
<h4>演示 .button('reset') 方法</h4>
<div id="myButtons3" class="bs-example">
    <button type="button" class="btn btn-primary"
            data-loading-text="Loading...">原始
    </button>
</div>
<h4>演示 .button(string) 方法</h4>
<button type="button" class="btn btn-primary" id="myButton4"
        data-complete-text="Loading finished">请点击我
</button>
<script type="text/javascript">
    $(function () {
        $("#myButtons1 .btn").click(function () {
            $(this).button('toggle');
        });
    });
    $(function () {
        $("#myButtons2 .btn").click(function () {
            $(this).button('loading').delay(1000).queue(function () {
            });
        });
    });
    $(function () {
        $("#myButtons3 .btn").click(function () {
            $(this).button('loading').delay(1000).queue(function () {
                $(this).button('reset');
            });
        });
    });
    $(function () {
        $("#myButton4").click(function () {
            $(this).button('loading').delay(1000).queue(function () {
                $(this).button('complete');
            });
        });
    }); </script>


</body>
</html>